<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础语法</title>
  <!--不用联网-->
  <script src="../vue.min.js"></script>
  <!--联网状态-->
  <!--<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>-->
</head>
<body>
  <div class="d1">
    <h1>1. 双向数据绑定演示<hr></h1>
    msg1: {{msg}} <br>
    msg2: <span v-text="msg"></span> <br>
    <input type="text" v-model="msg"> <br>
    <h1>2. 事件绑定<hr></h1>
    <!--第一种写法：-->
    <!--<input type="button" value="点击事件" v-on:click="studyLanguage">-->
    <!--第二种写法：-->
    <input type="button" value="点击事件" @click="studyLanguage"> <br>
    <!--3. 计算属性-->
    反转字符串：
    <div>
      <!--没有使用计算属性前：-->
      <h3>1. 使用传统方法：</h3>
      {{msg.split("").reverse().join('')}}<br>
      <!--使用了计算属性-->
      <h3>2. 使用计算属性完成：</h3>
      {{msgInfo}}
    </div>
  </div>
</body>
</html>
<script>
  let vs = new Vue({
    el: '.d1',        // vue对应的视图根选择器
    data: {           // 存放模型数据
      msg: 'abc'
    },
    // 这里定义普通方法：
    methods: {
      studyLanguage(){
        console.log("hello,click")
      }
    },
    // 使用计算属性
    computed: {
      msgInfo() {     // 计算属性的名字叫msgInfo,这里定义时要带括号，使用时不能带括号
        return this.msg.split("").reverse().join("")
      }
    }
  })
</script>
